<template>
  <div class="main">
    <NavBar :title="'混音设置'" @leftClick="leftClick" />
    <div class="tkBox" v-if="isShowTkBox">
      <span :class="['ic_pat', 'ic_warning']"></span>
      <div class="textBox">
        <span>为保障行车安全,原车音源请勿设置为0</span>
      </div>
    </div>
    <div class="footBox">
      <div class="SliderBox">
        <div class="boxLeft">
          <div>原车音源</div>
          <div class="fontNum">{{ originalCarAudio }}</div>
        </div>
        <van-slider
          v-model="valueOriginalCarAudio"
          @change="onChangeOriginal"
          bar-height="6px"
          :max="40"
          :min="0"
          active-color="#0A59F7"
          button-size="16px"
        />
      </div>
      <div
        class="SliderSource"
        v-for="(item, index) in SliderList"
        :key="index"
      >
        <div class="SliderLeft" style="width: 24px; height: 24px">
          <span
            :class="[item.isShow ? 'ic_radio_active' : 'ic_radio', 'ic_pat']"
            style="width: 24px; height: 24px"
            @click="handlerClickRadio(index)"
          ></span>
        </div>
        <div
          class="SliderMeddle"
          :style="{ opacity: item.isShowPoint ? '0.38' : '' }"
        >
          <div>{{ item.name }}</div>
          <div>{{ item.value }}</div>
        </div>

        <van-slider
          :disabled="item.isShowPoint"
          v-model="item.value"
          @change="handlerSound(item.id, item.value)"
          bar-height="6px"
          :max="40"
          :min="0"
          active-color="#0A59F7"
          button-size="16px"
        />
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "../../components/NavBar.vue";
import cardSlider from "../../components/cardSlider.vue";
import { mapState, mapGetters, mapActions } from "vuex";
export default {
  components: {
    NavBar,
    cardSlider,
  },
  name: "MixingSet",
  data() {
    return {
      valueOriginalCarAudio: null,
      SliderLeftValue: 0,
      isShowTkBox: false,
      SliderList: [
        {
          id: 0,
          name: "Hicar音源",
          isShow: false,
          value: this.HicarCarAudio,
          isShowPoint: false,
        },
        {
          id: 1,
          name: "AUX音源",
          isShow: false,
          value: this.AUXCarAudio,
          isShowPoint: false,
        },
        {
          id: 2,
          name: "USB音源",
          isShow: false,
          value: this.USBCarAudio,
          isShowPoint: false,
        },
      ],
    };
  },
  created() {
    //   radio没有选中无法拖动slider
    this.init();
    this.valueOriginalCarAudio = this.originalCarAudio;
    // this.SliderList.forEach((item)=>{
    //     if(item.id = 0){
    //       item.value =  this.HicarCarAudio
    //     }
    // })
    this.SliderList[0].value = this.HicarCarAudio;
    this.SliderList[1].value = this.AUXCarAudio;
    this.SliderList[2].value = this.USBCarAudio;
  },
  computed: {
    ...mapState({
      originalCarAudio: (state) => state.ble.originalCarAudio,
      HicarCarAudio: (state) => state.ble.HicarCarAudio,
      AUXCarAudio: (state) => state.ble.AUXCarAudio,
      USBCarAudio: (state) => state.ble.USBCarAudio,
    }),
  },
  watch: {
    originalCarAudio(newV, odlNew) {
      this.valueOriginalCarAudio = newV;
    },
  },

  mounted() {
    window.hilink && window.hilink.setTitleVisible(false);
  },
  beforeDestroy() {
    window.hilink && window.hilink.setTitleVisible(true);
  },
  methods: {
    leftClick() {
      this.$router.push("/");
    },
    // 原车滑轮事件
    onChangeOriginal(val) {
      console.log(val, "原车滑轮------", val.toString(16).padStart(2, 0));
      let str =
        `F05506000DF1${val
          .toString(16)
          .padStart(2, 0)}${this.HicarCarAudio.toString(16).padStart(
          2,
          0
        )}${this.AUXCarAudio.toString(16).padStart(
          2,
          0
        )}${this.USBCarAudio.toString(16).padStart(2, 0)}` +
        this.$getCheckSum(
          `F05506000DF1${val
            .toString(16)
            .padStart(2, 0)}${this.HicarCarAudio.toString(16).padStart(
            2,
            0
          )}${this.AUXCarAudio.toString(16).padStart(
            2,
            0
          )}${this.USBCarAudio.toString(16).padStart(2, 0)}`
        );
      window.bleManage.send(str);
      console.log("原车音源", str);

      if (this.originalCarAudio == 0) {
        this.isShowTkBox = true;
      } else {
        this.isShowTkBox = false;
      }
    },
    // 音源滑轮事件
    handlerSound(id, val) {
      console.log(
        "++++++++++",
        this.USBCarAudio.toString(16).padStart(2, 0) &&
          val.toString(16).padStart(2, 0),
        "---",
        val
      );
      if (id == 0) {
        // console.log(val, "音源滑轮------", val.toString(16).padStart(2, 0));
        let str =
          `F05506000DF1${this.originalCarAudio.toString(16).padStart(2, 0)}${
            this.HicarCarAudio.toString(16).padStart(2, 0) &&
            val.toString(16).padStart(2, 0)
          }${this.AUXCarAudio.toString(16).padStart(
            2,
            0
          )}${this.USBCarAudio.toString(16).padStart(2, 0)}` +
          this.$getCheckSum(
            `F05506000DF1${this.originalCarAudio.toString(16).padStart(2, 0)}${
              this.HicarCarAudio.toString(16).padStart(2, 0) &&
              val.toString(16).padStart(2, 0)
            }${this.AUXCarAudio.toString(16).padStart(
              2,
              0
            )}${this.USBCarAudio.toString(16).padStart(2, 0)}`
          );
        window.bleManage.send(str);
        console.log("Hicar音源", str);
      }
      if (id == 1) {
        // console.log(val, "音源滑轮------", val.toString(16).padStart(2, 0));
        let str =
          `F05506000DF1${this.originalCarAudio
            .toString(16)
            .padStart(2, 0)}${this.HicarCarAudio.toString(16).padStart(2, 0)}${
            this.AUXCarAudio.toString(16).padStart(2, 0) &&
            val.toString(16).padStart(2, 0)
          }${this.USBCarAudio.toString(16).padStart(2, 0)}` +
          this.$getCheckSum(
            `F05506000DF1${this.originalCarAudio
              .toString(16)
              .padStart(2, 0)}${this.HicarCarAudio.toString(16).padStart(
              2,
              0
            )}${
              this.AUXCarAudio.toString(16).padStart(2, 0) &&
              val.toString(16).padStart(2, 0)
            }${this.USBCarAudio.toString(16).padStart(2, 0)}`
          );
        window.bleManage.send(str);
        console.log("AUX音源", str);
      }
      if (id == 2) {
        let str =
          `F05506000DF1${this.originalCarAudio
            .toString(16)
            .padStart(2, 0)}${this.HicarCarAudio.toString(16).padStart(
            2,
            0
          )}${this.AUXCarAudio.toString(16).padStart(2, 0)}${
            this.USBCarAudio.toString(16).padStart(2, 0) &&
            val.toString(16).padStart(2, 0)
          }` +
          this.$getCheckSum(
            `F05506000DF1${this.originalCarAudio
              .toString(16)
              .padStart(2, 0)}${this.HicarCarAudio.toString(16).padStart(
              2,
              0
            )}${this.AUXCarAudio.toString(16).padStart(2, 0)}${
              this.USBCarAudio.toString(16).padStart(2, 0) &&
              val.toString(16).padStart(2, 0)
            }`
          );
        window.bleManage.send(str);
        console.log("USB音源", str);
      }
    },
    // radio事件
    handlerClickRadio(id) {
      this.SliderList.forEach((item) => {
        item.isShow = false;
        item.isShowPoint = true;
      });
      //   console.log(id)
      this.SliderList[id].isShow = true;
      this.SliderList[id].isShowPoint = false;
    },
    init() {
      // 进入页面没有选中slider 不可选
      this.SliderList.forEach((item) => {
        if (item.isShow == false) {
          item.isShowPoint = true;
        }
        // 进入页面初始化原车音源 如果value==0 弹出警告
        if (this.value == 0) this.isShowTkBox = true;
      });
    },
  },
};
</script>

<style lang="less">
.main {
  //   height: 100%;
  //   background: #f1f3f5;
  //   flex-direction: column;
  //   justify-content: center;
  //   align-content: center;
  .tkBox {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 336px;
    height: 68px;
    background-color: var(--red_bg_notice);
    border-radius: 16px;
    margin: auto;
    .textBox {
      width: 252px;
      height: 44px;
      font-size: 16px;
      color: var(--color_red);
      margin-right: 20px;
    }
  }
  .footBox {
    width: 336px;
    height: 264px;
    margin: auto;
    margin-top: 16px;
    background: #ffffff;
    opacity: 1;
    border-radius: 16px;
    .SliderBox {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 336px;
      height: 64px;
      padding: 0 16px;
      .boxLeft {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 110px;
        height: 64px;
        font-family: HarmonyHeiTi;
        // background-color: red;
        font-size: 14px;
        color: var(--font);
      }
    }
    .SliderSource {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: var(--font);
      padding: 0 16px;
      .SliderMeddle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 78px;
        height: 64px;
        flex-shrink: 0;
        margin-left: 16px;
      }
    }
  }
}
</style>